<template>
  <div class="center">
    <headers></headers>
    <div class="padding88">
      <div class="clearfix layoutWrap auto padding250">
        <div class="sideNav">
          <img class="userImage" src="../../assets/headdefault.png" v-if="person.avatar === '' || person.avatar === undefined || person.avatar === null"/>
          <img class="userImage" :src="person.avatar" v-else/>
          <p class="userName font14" v-if="person.nickName === '' || person.nickName === undefined || person.nickName === null" >未设置</p>
          <p class="userName font14">{{person.nickName}}</p>
          <div class="userAbout">
            <p class="studyCount active" v-if="person.studyCoin === '' || person.studyCoin === undefined || person.studyCoin === null">学习币 0</p>
            <router-link to="/ziliao/chongzhi" tag="p" class="studyCount active" v-else>学习币 {{person.studyCoin}}</router-link>
            <router-link to="/vip"  tag="p">
              <img src="../../assets/vipnow.png" alt="" v-if="person.isVip === 1">
              <img src="../../assets/vipgone.png" alt="" v-if="person.isVip === 2">
            </router-link>
          </div>
          <!--<p class="limit" v-if="(person.vipExpiryDate === '' || person.vipExpiryDate === undefined || person.vipExpiryDate === null) &&  person.isVip !== 0">VIP会员已到期</p>-->
          <!--<p class="limit" v-else-if="person.isVip === 0"></p>-->
          <p class="limit" v-if="person.vipExpiryDate !== null && person.vipExpiryDate !== '' && person.vipExpiryDate !== undefined">VIP会员{{person.vipExpiryDate}}到期</p>
          <!--<p class="limit"></p>-->
          <ul class="sideLink">
            <li class="linkActive">
              <router-link to="/ziliao/ziliao" exact><span class="linkIcons"><img src="../../assets/left1.png"/></span>账号资料</router-link>
            </li>
            <li>
              <router-link to="/ziliao/order" exact><span class="linkIcons"><img src="../../assets/left2.png"/></span>我的订单</router-link>
            </li>
            <li>
              <router-link to="/ziliao/myzhengshu" exact><span class="linkIcons"><img src="../../assets/left12.png"/></span>我的证书</router-link>
            </li>
            <!--<li>
              <router-link to="/ziliao/jixujiaoyu" exact><span class="linkIcons"><img src="../../assets/left11.png"/></span>继续教育</router-link>
            </li>
            <li>
              <router-link to="/ziliao/xuefen" exact><span class="linkIcons"><img src="../../assets/left13.png"/></span>学分认定</router-link>
            </li>-->
            <li>
              <router-link to="/ziliao/myExamPage" exact><span class="linkIcons"><img src="../../assets/left14.png"/></span>我的考试</router-link>
            </li>

            <li>
              <router-link to="/ziliao/jilu" exact><span class="linkIcons"><img src="../../assets/left3.png"/></span>观看记录</router-link>
            </li>
            <li>
              <router-link to="/ziliao/ablity" exact><span class="linkIcons"><img src="../../assets/left4.png"/></span>我的能力</router-link>
            </li>
            <li>
              <router-link to="/ziliao/jifen" exact><span class="linkIcons"><img src="../../assets/left5.png"/></span>我的积分</router-link>
            </li>
            <li>
              <router-link to="/ziliao/plan" exact><span class="linkIcons"><img src="../../assets/left6.png"/></span>我的计划</router-link>
            </li>
            <li>
              <router-link to="/ziliao/shoucang" exact><span class="linkIcons"><img src="../../assets/left7.png"/></span>我的收藏</router-link>
            </li>
            <!--  <li>
                <router-link to="/kefu" exact><span class="linkIcons"><img src="../../assets/left9.png"/></span>我的客服</router-link>
              </li>-->
            <li>
              <router-link to="/ziliao/fapiaojilu" exact><span class="linkIcons"><img src="../../assets/left10.png"/></span>开票记录</router-link>
            </li>
            <li>
              <router-link to="/ziliao/msg" exact><span class="linkIcons"><img src="../../assets/left8.png"/></span>我的消息</router-link>
            </li>
          </ul>
        </div>
        <div class="layoutMain">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <footers></footers>
    <loginModal ref="loginInput"></loginModal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .center{
    background-color: #f5f5f5;
    height: 100%;
    .layoutWrap {
      margin: 50px auto 20px;
      .sideNav {
        width: 320px;
        float: left;
        padding: 35px 0;
        background-color: #fff;
        .userImage {
          display: block;
          width: 80px;
          height: 80px;
          overflow: hidden;
          margin: 0px auto;
          border-radius: 50%;
        }
        .limit{
          font-size: 14px;
          color: #666;
          margin-top: 10px;
        }
        .userName {
          font-size: 14px;
          color: #333;
          padding: 0 30px;
          text-align: center;
          margin: 15px 0 0 0;
          line-height: 24px;
        }
        .userAbout {
          margin-top: 15px;
          text-align: center;
          padding: 0 10px;
          cursor: pointer;
        }
        .userAbout{
          p {
            display: inline-block;
            font-size: 14px;
            padding: 0 0 0 20px;
            background-size: 16px;
            text-align: left;
          }
          p:last-child img{
            position: relative;
            top: 4px;
          }
          .active{
            color: #FF9900;
          }
          .studyCount {
            background: url("../../assets/icon1_1.png") no-repeat left center;
          }
          .active.studyCount {

            background: url("../../assets/icon1.png") no-repeat left center;
          }
          .active.userLevel {
            background: url("../../assets/icon2.png") no-repeat left center;
          }
        }
        .sideLink {
          list-style: none;
          li {
            height: 50px;
            text-align: left;
            a {
              display: block;
              padding: 0 60px;
              height: 50px;
              line-height: 50px;
              font-size: 14px;
              color: #666;
              vertical-align: middle;
              .linkIcons {
                display: inline-block;
                vertical-align: middle;
                margin-right: 20px;
                width: 24px;
                height: 24px;
                overflow: hidden;
                img {
                  display: block;
                  width: 24px;
                  height: 48px;
                }
              }
            }
            a:hover {
              color: #083C68;
              span img {
                margin-top: -24px;
              }
            }

          }
          .navActive{
            color: #083C68;
            font-weight: 600;
          }
        }
      }
    }
    .layoutMain{
      text-align: left;
      float: left;
      width: 840px;
      min-height: 675px;
    }
  }
  .layoutWrap .sideNav .sideLink .navActive  span img {
    margin-top: -24px;
  }
  .layoutWrap .layoutMain {
    margin: 0 0 0 40px;
    padding: 30px 25px;
    background-color: #fff;
  }
  .layoutWrap .layoutMain .ivu-tabs-ink-bar {
    background-color: #083C68;
  }
  .layoutWrap .layoutMain .ivu-tabs-bar .ivu-tabs-tab {
    font-size: 16px;
    color: #666;
    padding: 20px;
  }
  .layoutWrap .layoutMain .ivu-tabs-bar .ivu-tabs-tab-active {
    color: #083C68;
  }
</style>
<script type="text/ecmascript-6">
  import headers from './header'
  import footers from './footer'
  import loginModal from './loginmodal'
  import {centreInfoWeb} from '../../http'
  import {getStore,setStore} from '../../storage'
  import imgPathFilter from '../../myFilters'
    export default {
        name: 'center',
        props: {},
        data() {
            return {
              nowIndex:0,
              nickName:'',      //昵称
              avatar:'',      //姓名
              vipName:'',       //vip名称
              studyCoin:0,       //剩余学习币
              person:''
            };
        },
        methods: {
          getInfo(){
            /*if(getStore('person') !== null) {
              this.person = JSON.parse(getStore('person'));
            }
            if(this.person === '' || this.person === undefined || this.person === null) {
              centreInfoWeb().then(res => {
                if(res.code === 200) {
                  this.person = res.data;
                  setStore('person', this.person);
                }
              }).catch()
            }*/
            centreInfoWeb().then(res => {
              if(res.code === 200) {
                this.person = res.data;
                // setStore('person', this.person);
              }
            }).catch()
          }
        },
        created() {
          //用户是否登录，同时获取用户信息
          centreInfoWeb().then(res => {
            if(res.code === 200) {
              // this.getInfo();
             this.person = res.data;
            }else{
              this.$Notice.warning({
                title: '登录提醒 ',
                desc: '个人中心需用户登录 ',
                duration: 3,
              });
              //用户未登录时，跳转首页
              this.$router.push({
                path:'/'
              })
            }
          }).catch()
        },
        components: {
          headers,
          footers,
          loginModal
        }
    }
</script>
